<template>
    <div>
        <div
                class="col-md-12"
                style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc"
        >
            <el-row>
                <el-col :span="16" style="padding-left: 20px">
                    <el-tooltip
                            class="item"
                            effect="dark"
                            content="选择要显示的列"
                            placement="top"
                    >
                        <el-popover placement="bottom" width="300" trigger="click">
                            <el-col :span="12">
                                <el-checkbox
                                        v-model="showCustomerCode"
                                        @change="showHide('showCustomerCode')"
                                >客户代码
                                </el-checkbox>
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox
                                        v-model="showCustomerStatus"
                                        @change="showHide('showCustomerStatus')"
                                >客户状态
                                </el-checkbox>
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox
                                        v-model="showCustomerCate"
                                        @change="showHide('showCustomerCate')"
                                >客户类别
                                </el-checkbox>
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox
                                        v-model="showCreditRank"
                                        @change="showHide('showCreditRank')"
                                >客户信用等级
                                </el-checkbox>
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox
                                        v-model="showCreditLine"
                                        @change="showHide('showCreditLine')"
                                >授信额度
                                </el-checkbox>
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox
                                        v-model="showCapital"
                                        @change="showHide('showCapital')"
                                >注册资金
                                </el-checkbox
                                >
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox
                                        v-model="showAnnualSales"
                                        @change="showHide('showAnnualSales')"
                                >年销售额
                                </el-checkbox>
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox v-model="showBank" @change="showHide('showBank')"
                                >对公银行账号
                                </el-checkbox
                                >
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox
                                        v-model="showCertificateNo"
                                        @change="showHide('showCertificateNo')"
                                >开户银行
                                </el-checkbox>
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox
                                        v-model="showAddress"
                                        @change="showHide('showAddress')"
                                >税务登记证号
                                </el-checkbox>
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox v-model="showArea" @change="showHide('showArea')"
                                >地址
                                </el-checkbox
                                >
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox v-model="showBrand" @change="showHide('showBrand')"
                                >经营面积
                                </el-checkbox
                                >
                            </el-col>
                            <el-col :span="12">
                                <el-checkbox
                                        v-model="showBankAccount"
                                        @change="showHide('showBankAccount')"
                                >模拟，对应列表的列项
                                </el-checkbox>
                            </el-col>
                            <el-button
                                    size="small"
                                    slot="reference"
                                    type="plain"
                                    class="setting"
                            >
                                <div style="display: flex; flex-direction: column">
                                    <i class="el-icon-setting"></i>
                                    <span style="margin-top: 3px">显示设置</span>
                                </div>
                            </el-button>
                        </el-popover>
                    </el-tooltip>

                    <el-button
                            @click="handleImport(3)"
                            size="small"
                            style="margin-top: 10px; margin-bottom: 10px; margin-left: 10px"
                            type="plain"
                            class="setting"
                    >
                        <div style="display: flex; flex-direction: column">
                            <i class="el-icon-setting"></i>
                            <span style="margin-top: 3px">上报审批</span>
                        </div>
                    </el-button>

                    <el-button
                            @click="handleImport(4)"
                            size="small"
                            style="margin-top: 10px; margin-bottom: 10px"
                            type="plain"
                            class="setting"
                    >
                        <div style="display: flex; flex-direction: column">
                            <i class="el-icon-setting"></i>
                            <span style="margin-top: 3px">转为订单</span>
                        </div>
                    </el-button>
                    <el-input
                            placeholder
                            v-model="inputSearch"
                            class="input-with-select input-search"
                            style="margin-left: 10px; width: 450px; height: 47px; top: 9px"
                            speech
                            x-webkit-speech
                            size="large"
                    >
                        <el-select
                                v-model="selectsearch"
                                slot="prepend"
                                placeholder="请选择"
                        >
                            <el-option label="客户名称" value="1"></el-option>
                            <el-option label="款号" value="2"></el-option>
                            <el-option label="审批状态" value="3"></el-option>
                            <el-option label="物品名称" value="4"></el-option>
                            <el-option label="物品类别" value="7"></el-option>
                            <el-option label="序号id" value="5"></el-option>
                            <el-option label="客户代码" value="6"></el-option>
                        </el-select>
                        <i slot="prefix" class="iconfont iconpaizhao1"></i>

                        <el-button slot="append" icon="el-icon-search" style="height: 47px"
                        >查询
                        </el-button
                        >
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <el-tooltip
                            class="item"
                            effect="dark"
                            content="操作：选择下面列表，然后点击按钮"
                            placement="top"
                    >
                        <el-button
                                @click="handleDelCustomer(1)"
                                size="small"
                                style="margin:10px;float: right"
                                type="plain"
                                class="setting"
                        >
                            <div style="display: flex; flex-direction: column">
                                <i class="el-icon-setting"></i
                                ><span style="margin-top: 3px">删除</span>
                            </div>
                        </el-button>
                    </el-tooltip>
                    <el-button
                            @click="handleImport(2)"
                            size="small"
                            style="margin-top: 10px; margin-bottom: 10px; float: right"
                            type="plain"
                            class="setting"
                    >
                        <div style="display: flex; flex-direction: column">
                            <i class="el-icon-setting"></i
                            ><span style="margin-top: 3px">导出</span>
                        </div>
                    </el-button>
                    <el-button
                            @click="handleImport(1)"
                            size="small"
                            style="margin-top: 10px; margin-bottom: 10px; float: right"
                            type="plain"
                            class="setting"
                    >
                        <div style="display: flex; flex-direction: column">
                            <i class="el-icon-setting"></i
                            ><span style="margin-top: 3px">导入</span>
                        </div>
                    </el-button>

                    <el-button
                            @click="handleSelectionChange"
                            size="small"
                            style="margin-top: 10px; margin-bottom: 10px; float: right"
                            type="plain"
                            class="setting"
                    >
                        <div style="display: flex; flex-direction: column">
                            <i class="el-icon-setting"></i
                            ><span style="margin-top: 3px">新建</span>
                        </div>
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <el-table
                ref="multipleTable"
                :data="tableData"
                border
                stripe
                height="600"
                row-class-name="tableRow"
                header-row-class-name="tableHeader"
                @row-dblclick="handleButtons(12)"
                style="width: 100%; border-top: 1px solid #c5c5c5"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="序号" sortable width="80">
            </el-table-column>
            <el-table-column prop="image" label="图片" width="120">
                <template scope="scope">
                    <img :src="scope.row.image" width="40" height="40" class="head_pic"/>
                </template>
            </el-table-column>
            <el-table-column prop="kfmc" label="客户名称" sortable width="150">
            </el-table-column>
            <el-table-column prop="kflxr" label="客户联系人" sortable width="150">
            </el-table-column>
            <el-table-column prop="spzt" label="审批状态" sortable width="120">
            </el-table-column>
            <el-table-column prop="wpmc" label="物品名称" sortable width="120">
            </el-table-column>
            <el-table-column prop="wppl" label="物品品类" sortable width="120">
            </el-table-column>
            <el-table-column prop="kh" label="款号" sortable width="120">
            </el-table-column>
            <el-table-column prop="jg" label="价格" sortable width="120">
            </el-table-column>
            <el-table-column prop="wpdj" label="物品等级" sortable width="120">
            </el-table-column>
            <el-table-column prop="zsmc" label="主石名称" sortable width="120">
            </el-table-column>
            <el-table-column prop="zsls" label="主石粒数" sortable width="80">
            </el-table-column>
            <el-table-column prop="zszl" label="主石重量" sortable width="80">
            </el-table-column>
            <el-table-column prop="fsmc" label="副石名称" sortable width="120">
            </el-table-column>
            <el-table-column prop="fsls" label="副石粒数" sortable width="80">
            </el-table-column>
            <el-table-column prop="fszl" label="副石重量" sortable width="80">
            </el-table-column>
            <el-table-column prop="dw" label="单位" sortable width="80">
            </el-table-column>
            <el-table-column prop="ggcc" label="规格尺寸/手寸" sortable width="120">
            </el-table-column>
            <!-- <el-table-column prop="cc" label="" sortable width="120">
            </el-table-column> -->
            <el-table-column prop="gjspl" label="金属品类" sortable width="120">
            </el-table-column>
            <el-table-column prop="xsh" label="镶石费" width="120">
            </el-table-column>
            <!-- <el-table-column prop="sl" label="税率" width="120">
            </el-table-column> -->
            <el-table-column prop="cjr" label="创建人" width="120">
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="120">
            </el-table-column>
            <el-table-column prop="update_time" label="更新时间" width="120">
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange1"
                    @current-change="handleCurrentChange1"
                    :current-page="currentPage1"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="20"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
            ></el-pagination>
        </div>

        <dialog-product-add
                v-bind:dialogshow="dialogProductAdd"
                @dialog_close="dialogProductAdd = !dialogProductAdd"
        ></dialog-product-add>
        <dialog-product-Info
                v-bind:dialogshow="dialogProductInfo"
                @dialog_close="dialogProductInfo = !dialogProductInfo"
        ></dialog-product-Info>
    </div>
</template>

<style scoped>

    .tableHeader th {
        background-color: #f5f5f5 !important;
        /*color: #000000;*/
        /*border-color: #c5c5c5;*/
    }

    .el-tabs__content {
        padding: 0px !important;
    }


    /* #pricesManages .el-form-item {
      width: 200px !important;
      float: left;
      margin-bottom: 5px;
    }

    #pricesManages .el-form-item .el-form-item__label {
      width: 120px !important;
    }

    #pricesManages .el-form-item .el-form-item__content {
      margin-left: 120px !important;
    } */


    .el-dialog__body,
    .el-form {
        overflow: hidden;
    }

    .tableRow {
        cursor: pointer;
    }

    .upload-demo {
        margin-top: 20px;
    }
</style>

<script>
  module.exports = {
    methods: {
      handleSizeChange1 (val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange1 (val) {
        console.log(`当前页: ${val}`)
      },
      handleRemove (file, fileList) {
        console.log(file, fileList)
      },
      handlePreview (file) {
        console.log(file)
      },
      handleExceed (files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
            } 个文件`
        )
      },
      beforeRemove (file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },
      addData () {
        this.tableDatas.push({
          edit: true,
        })
      },
      //确认添加
      confirmAdd (row) {
        row.edit = false
      },
      //修改
      editData (row) {
        row.edit = true
      },
      //删除
      deleteData (row, index) {
        this.tableDatas.splice(index, 1)
      },
      handleClick (row) {
        console.log(row)
        console.log(22)

        this.dialogHistoryPricesList = true

        event.preventDefault()

        event.stopPropagation()
      },
      // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //   if (columnIndex === 2) {
      //     return {
      //       rowspan: row.rowspan,
      //       colspan: 1,
      //     };
      //   }
      // },
      handleSelectionChange (val) {
        //显示新建
        console.log(333)
        this.dialogProductAdd = true
      },
      // handleSelectionChange1(val) {
      //   //显示详情
      //   console.log(333);
      //   this.dialogProductInfo = true;
      // },
      // handleSelectionChange2 (val) {
      //   //显示编辑单详情
      //   console.log(333)
      //   this.dialogBaojiaEdit = true
      // },

      openChangeCustomerDialog (val) {
        this.dialogCostomsChange = true
      },

      handleDelCustomer (val) {
        // 删除操作
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作',
            })
          })
      },

      handleImport (val) {
        if (val === 1) {
          //导入操作
          this.$alert('打开文件夹导入工作', '导入', {
            confirmButtonText: '确定',
            callback: (action) => {
              this.$message({
                type: 'success',
                message: '导入成功',
              })
            },
          })
        } else if (val === 2) {
          //导出操作
          this.$alert('打开文件夹导出工作', '导出', {
            confirmButtonText: '确定',
            callback: (action) => {
              this.$message({
                type: 'success',
                message: '导出表格成功',
              })
            },
          })
        } else if (val === 3) {
          //导出操作
          this.$confirm('提交审核, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.$message({
                type: 'success',
                message: '提交成功!',
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作',
              })
            })
        } else if (val === 4) {
          //导出操作

          this.$confirm('是否生成订单, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.$message({
                type: 'success',
                message: '成功!',
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作',
              })
            })
        }
      },

      handleButtons (val) {
        switch (val) {
          case 1:
            this.dialogSendMessage = 'true'
            console.log(this.dialogSendMessage)
            break
          case 2:
            this.dialogWeixin = 'true'
            console.log(this.dialogWeixin)
            break
          case 3:
            this.dialogEmail = 'true'
            console.log(this.dialogEmail)
            break
          case 4:
            this.dialogChangeCustomer = 'true'
            console.log(this.dialogChangeCustomer)
            break
          case 12:
            this.dialogProductInfo = 'true'
            console.log(this.dialogProductInfo)
            break
          case 6:
            this.$confirm('是否继续操作?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
              .then(() => {
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                })
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消',
                })
              })
            break
        }
      },
      handleChangeCustomer (val) {
        this.dialogChangeCustomer = 'true'
        console.log(this.dialogChangeCustomer)
      },
      dialogAdd () {
        console.log(123)
      },
      getSummaries (param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价'
            return
          }
          const values = data.map((item) => Number(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] += ' 元'
          } else {
            sums[index] = ''
          }
        })

        return sums
      },
      showHide (text) {
        console.log(text)
      },
      send_message_dialog_close (val) {
        console.log(val)
        this.dialogSendMessage = false
      },
      send_weixin_dialog_close (val) {
        this.dialogWeixin = false
      },
      send_email_dialog_close (val) {
        this.dialogEmail = false
      },
      change_customer_dialog_close (val) {
        console.log(val)
        this.dialogChangeCustomer = false
      },
      clickfullscreen () {
        this.fullscreen = !this.fullscreen
      },
    },

    data () {
      return {
        isPhotoList: false,

        fullscreen: false,
        currentPage1: 10,
        inputSearch: '',
        selectsearch: '',
        arrs: [],

        tableDatas: [],
        fileList: [],
        dialogProductInfo: false,
        dialogCostoms: false,
        dialogHistoryPricesList: false,
        dialogCostomsChange: false,
        dialogSendMessage: false,
        dialogWeixin: false,
        dialogEmail: false,
        dialogChangeCustomer: false, //客户跟进
        dialogProductAdd: false,
        dialogProducInfo: false,
        // dialogBaojiaEdit:false,//编辑报价单,另外放入详情组件里
        scheduleType: [{ typename: '清理库存' }, { typename: '节日促销' }],
        historyPrices: [
          {
            date: '2019-05-02',
            name: '100',
            typename: '清理库存',
            address: '2019-05-02 - 2020-01-01',
          },
          {
            date: '2020-01-02',
            name: '90',
            typename: '节日促销',
            address: '2020-01-02 - 2020-02-01',
          },
        ],
        customer: {
          adjust_time: '',
          name: '',
          customercode: '',
          customerstatus: '',
          customercate: '',
          creditrank: '',
          creditline: '',
          capital: '',
          annualsales: '',
          bank: '',
          certificateno: '',
          address: '',
          area: '',
          brand: '',
          bankaccount: '',
          trademark: '',
          website: '',
          lperson: '',
          lphone: '',
          contacts: '',

          phone: '',
          phonenum: '',
          weixin: '',
          email: '',
          fax: '',
          resource: '',
          requirement: '',
          ordercountmonth: '',
          purchaseamountmonth: '',
          ordercountyear: '',
          purchaseamountyear: '',
          customerstaffname: '',
          customerstaffcode: '',
          operator: '',
          insertime: '',
          remark: '',
        },

        form: {
          typeId: '',
        },

        select: {
          name: '',
          introduce: '',
          cooperative_brand: '',
          customer_status: '',
          customer_level: '',
          now_principal_id: '',
          last_follow_up_date: '',
          create_date: '',
        },

        crmsclientStatic: [
          { typename: '类别一' },
          { typename: '类别二' },
          { typename: '类别三' },
        ],

        crmsclientRank: [
          { typename: 'A类' },
          { typename: 'B类' },
          { typename: 'C类' },
          { typename: 'D类' },
        ],

        customerstaffs: [
          { typename: '客服1' },
          { typename: '客服2' },
          { typename: '客服3' },
          { typename: '客服4' },
        ],

        changeReason: [
          { typename: '交接原因一' },
          { typename: '交接原因二' },
          { typename: '交接原因三' },
          { typename: '其他' },
        ],

        options1: [],

        pickerOptions2: {
          shortcuts: [
            {
              text: '最近一周',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近一个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近三个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              },
            },
          ],
        }, //日期控件
        pickerOptions1: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [
            {
              text: '今天',
              onClick (picker) {
                picker.$emit('pick', new Date())
              },
            },
            {
              text: '昨天',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              },
            },
            {
              text: '一周前',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              },
            },
          ],
        }, //首次合作日期

        showCustomerCode: true,
        showCustomerStatus: true,
        showCustomerCate: true,
        showCreditRank: true,
        showCreditLine: true,
        showCapital: true,
        showAnnualSales: true,
        showBank: true,
        showCertificateNo: true,
        showAddress: true,
        showArea: true,
        showBrand: true,
        showBankAccount: true,
        showTrademark: true,
        showWebsite: true,
        showLperson: true,
        showLphone: true,
        showContacts: true,

        showPhone: true,
        showPhoneNum: true,
        showWeixin: true,
        showEmail: true,
        showFax: true,
        showResource: true,
        showRequirement: true,
        showOrderCountMonth: true,
        showPurchaseAmountMonth: true,
        showOrderCountYear: true,
        showPurchaseAmountYear: true,
        showCustomerStaffName: true,
        showCustomerStaffCode: true,
        showOperator: true,
        showInsertime: true,
        showRemark: true,

        tableData: [
          {
            id: '1',
            create_time: '2016-05-02 08:08:08',
            update_time: '2016-05-02 08:08:08',
            image: '/public/images/eh1.jpg',
            kfmc: '某珠宝公司',
            kflxr: '王先生',
            wpmc: '戒指',
            spzt: '审批中',
            wppl: '戒指',
            kh: 'WERWQE123',
            wpdj: 'A类',
            dw: '件',
            gjsp: '铂金999.99%',
            fsys: '红',

          },
          {
            id: '2',
            create_time: '2016-05-02 08:08:08',
            update_time: '2016-05-02 08:08:08',
            image: '/public/images/eh1.jpg',
            kfmc: '某珠宝公司',
            kflxr: '王先生',
            wpmc: '戒指',
            spzt: '审批中',
            wppl: '戒指',
            kh: 'WERWQE123',
            wpdj: 'A类',
            dw: '件',
            gjsp: '铂金999.99%',
            fsys: '红',

          },
          {
            id: '3',
            create_time: '2016-05-02 08:08:08',
            update_time: '2016-05-02 08:08:08',
            image: '/public/images/eh1.jpg',
            kfmc: '某珠宝公司',
            kflxr: '王先生',
            wpmc: '戒指',
            spzt: '审批中',
            wppl: '戒指',
            kh: 'WERWQE123',
            wpdj: 'A类',
            dw: '件',
            gjsp: '铂金999.99%',
            fsys: '红',

          },
          {
            id: '4',

          },
          {
            id: '5',

          },
        ],
        multipleSelection: [],

      }
    },
    components: {
      // 将组建加入组建库
      // "send-message": "url:./send/send-message.vue",
      // "send-weixin": "url:./send/send-weixin.vue",
      // "send-email": "url:./send/send-email.vue",

      'dialog-product-add': 'url:./dialog/product-add.vue',
      'dialog-product-info': 'url:./dialog/product-info.vue',

    },
  }
</script>
